import { View } from '@tarojs/components';
import { useEffect, useState } from 'react';
import { getProTable } from '@/mock/example';
import { CLoadMoreCustom, CScrollViewCustom } from '@vh-mobile/pro-components';
import useLoadMore from '@/hooks/useLoadMore';

export default function DemoList() {
  const [loadData, setLoadData] = useState<any>([]);
  const {
    loadMoreState,
    loadMoreShowLoading,
    loadMoreHideLoading,
    loadMoreCheckLoading,
    loadMoreLoadHandle,
  } = useLoadMore();

  // 分页的处理逻辑
  const loadRequestData = (page?: any) => {
    if (!loadMoreCheckLoading()) {
      return false;
    }
    loadMoreShowLoading();

    getProTable({
      page: page || loadMoreState.page,
    })
      .then((res: any) => {
        if (res.data?.data) {
          const datas = [...loadData, ...res.data.data];

          setLoadData(datas);
          loadMoreLoadHandle(res.data.total, datas.length);
        }
      })
      .finally(() => {
        loadMoreHideLoading();
      });
  };

  useEffect(() => {
    loadRequestData(1);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const onScrollToLower = () => {
    loadRequestData();
  };

  return (
    <CScrollViewCustom onReachBottom={onScrollToLower}>
      {loadData.map((item, index) => {
        return (
          <View key={index}>
            <View> 为Taro而设计的Hooks Library</View>
            <View> 页面 Library</View>
            <View> 页面 Library</View>
            <View> 页面 Library</View>
            <View> 页面 Library</View>
            <View> end Library</View>
          </View>
        );
      })}
      <CLoadMoreCustom data={loadData} loadMoreState={loadMoreState} />
    </CScrollViewCustom>
  );
}
